<template>
    <div>
<el-card shadow="always">
<el-button icon="el-icon-plus" size="default" type="primary" @click="add">添加</el-button>
<el-dialog
  title="添加品牌"
  :visible.sync="dialogVisible"
  width="60%"
 
  :before-close="handleClose">
  <span slot-scoped="default">
      <el-row flex="flex">
          <el-col :span="5">品牌名称</el-col>
          <el-col :span="8"><el-input v-model="form.tmName"></el-input></el-col>
      </el-row>
      <el-row flex="flex">
          <el-col :span="5"> 品牌LOGO </el-col>
          <el-col :span="8">
            <el-upload
  action="/dev-api/admin/product/fileUpload"
  list-type="picture-card"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :on-preview="handlePictureCardPreview"
  :before-upload="beforeAvatarUpload"
  :on-remove="handleRemove">
  <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">
  <i class="el-icon-plus" v-else></i>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过50kb</div>
</el-upload>
         </el-col>
      </el-row>
   
  
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="quit" >取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
</el-dialog>

<el-table :data="MarkLists"
          style="width: 100%"
          border
          >

  <el-table-column
                   label="序号"
                   type="index"
                   width="100"
                   prop="id"
                   >
  </el-table-column>
  <el-table-column prop="tmName"
                   label="品牌名称"
                   width="300">
  </el-table-column>
  <el-table-column prop="渲染绑定的表数据tableDate中的哪个数据"
                   label="品牌LOGO"
                   width="300">
                   <template slot-scope="{row,$index}">
                    <img :src="row.logoUrl" alt="">
                  </template>
  </el-table-column>
  <el-table-column 
                   label="操作"
                   width="250">


<template v-slot="{row,$index}">
    <el-button type="warning" icon="el-icon-edit" size="small" @click="repairitem(row,index)">修改</el-button>
    <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteitem(row,index)">删除</el-button>
</template>
  </el-table-column>
</el-table>
<el-pagination
      a='pageSize 改变时会触发' 
      @size-change="handleSizeChange"
      b="currentPage 改变时会触发"
      @current-change="handleCurrentChange"
      c="每页显示个数选择器的选项设置"
      :page-sizes="limit"
      d="每页显示条目个数，支持 .sync 修饰符"
      :page-size="limit"
      e="组件布局，子组件名用逗号分隔"
      layout="prev, pager, next, jumper, ->, sizes,total"
      f="总条目数"
      background
      :total="total">
    </el-pagination>
</el-card>
    </div>
</template>

<script>
import { request } from 'http';

    export default {
    data() {
      return {
        form: { // 用来收集品牌添加的数据
          id:'',
          tmName: '', // 品牌名称
          logoUrl: '', // 品牌logo的url
        },
        limit:3,
        total:0,
        page:1,
        loading:false,//是否请求中
        // tableData: [{
        //   date: '2016-05-02',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1518 弄'
        // }, {
        //   date: '2016-05-04',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1517 弄'
        // }, {
        //   date: '2016-05-01',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1519 弄'
        // }, {
        //   date: '2016-05-03',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1516 弄'
        // }],
        MarkLists:[],//品牌列表
        pagesize:[
        10,20,30,40
        ], //分页100-400
        dialogVisible:false,//dialog框的显示与隐藏
        //dialogImageUrl: '',//dialog框的图片
        inputSome:'',//添加文本框的数据
      
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
   handleCurrentChange(val) {
        // console.log(val);
       const result2 =this.MarkList(this.page=val,this.limit)
       console.log(result2)
      },
      //修改按钮
      repairitem(){

      },
      //dialog确定按钮
     async confirm(){
     
      const form = this.form
      if(form.id){
        //更新的逻辑
      const result = await this.$API.trademark. getUpdateTrademark(form) 
      this.MarkList()
      this.form={}
      }else{   
        //添加的逻辑
        const result = await this.$API.trademark.getAddTrademark(form)
        this.MarkList()
   
      }
      this.$message.success('添加或者修改成功？')
      this.dialogVisible= false;
      },
    
      quit(){
        this.dialogVisible = false
        this.form = {}
      },

        //添加的逻辑
      add(){
      this.dialogVisible= true;
      },
      //修改的逻辑
      async repairitem(row,index){
        this.dialogVisible= true;
        // form.id=this.row.id;
        // form.tmName=this.row.tmName;
        // form.logoUrl=this.row.logoUrl
        // console.log(row)
        this.form = {...row}
        this.MarkList()
        // console.log(result)
      },
      // dialog的逻辑
      //上传文件的逻辑
    //  async handleAvatarSuccess(res, file) {
    //     const result1 = await this.$API.trademark.getFileUpload
    //     console.log(result1)
    //   },
     async beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      
      },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    ,
    handleAvatarSuccess(res, file) {
      this.form.logoUrl = res.data
      },
      //删除按钮
   deleteitem(row,index){
        //  console.log(row.id)
        //  console.log(this.$API)
      this.deleteitemer(row.id)
      // console.log(删除按钮,result)
      this.MarkList()
      },
      //删除按钮(删不掉)
      async deleteitemer(markid){
        console.log(this.$API)
        console.log(markid)
         await this.$API.trademark.getDeleteTrademark(markid)
         this.$message.success('删除成功')
      },
     //渲染页面的函数
    async MarkList(page= 1,limit=3){
      page=this.page
      this.loading=true
      const result = await this.$API.trademark.getList(page,limit)
      console.log(result)
      this.loading =false
      const MarkLists=result.data.records
      this.MarkLists=MarkLists
      const total =result.data.total
      this.total = total
      limit = result.data.size
      console.log(limit)
      this.limit = limit
      }
      // repairitem()
      
    },
    mounted() {
        this.MarkList()
        // console.log(this.$API)
      },
    
    // data() {
    //   return {
    //     currentPage1: 5,
    //     currentPage2: 5,
    //     currentPage3: 5,
    //     currentPage4: 4
    //   };
    // }
    }
    
    
</script>

<style scoped>
img{
  width: 100px;
  height: 90px;
}
/* .marklist-mark{
  display: flex;
  justify-content: space-around;
} */

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

 <!-- :current-page="currentPage4" -->